<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>仓储系统</title>
  <style>
    *{margin:0px;padding:0px;}
    body{background:#eee;}
    .top{
      background:white;
      height:20px;
      border-bottom:1px solid #ccc;
      padding:20px;
      padding-top:5px;
    }
    .logo{float:left;font-size:18px;margin-top:5px;}
    .other{float:right;height:30px;
      line-height: 30px;}
    .notice_icon{float:left;margin-left:10px;margin-right:20px;
      position:relative;}
    .user_info{float:left;}
    .notice_icon span{
      position: absolute;
      border-radius: 100%;
      right:-3px;
      top:0px;
      width:16px;
      height:16px;
      line-height: 16px;
      font-size:12px;
      background:red;
      color:white;
      text-align:center;
      display:block;
    }
    .cnt{overflow: hidden;}
    .nav{
      width:15%;
      float:left;
      text-align: center;
    }
    li{
      height:40px;
      line-height:40px;

    }
    h3{
      margin-top:10px;
      margin-bottom:10px;
    }
    .main{
      width:85%;
      float:left;
      background:white;
      padding:20px;
      margin-top:10px;
      box-sizing: border-box;
    }
    .bot{
      border-top:1px solid #ccc;
      text-align: center;
      font-size:14px;
      color:#999;
      margin-top:10px;
      padding-top:10px;
    }
    .btn{
      width:100px;
      height:36px;
      color:white;
      font-size:14px;
      line-height: 36px;
      background:orange;
      margin-top:30px;
      text-align: center;
      border-radius: 3px;
      margin-right:20px;
    }
    .main_top{

      overflow:hidden;
    }
    .main_top h3{
      float:left;
    }
    .main_top .btn{
      float:right;
    }
    .input_div{
      margin-top:10px;
      margin-bottom:10px;
    }
    input{
      width:200px;
      height:24px;
    }
    #list_div{
      border-radius: 5px;
    }
    .list{
      height:40px;
      line-height: 40px;
    }
    .ntitle{
      float:left;
    }
    .ntime{
      float:right;
    }
  </style>
</head>
<body>
<div class="all">
  <div class="top">
    <div class="logo">仓储系统</div>
    <div class="other">
      <div class="notice_icon"><span>5</span>
        <img src="images/notice.png" width="24" style="margin-top:2px;" />
      </div>
      <div class="user_info"><img width="30" src="images/touxiang.png" />
      </div>
    </div>
  </div>
  <div class="cnt">
    <div class="nav">
      <div class="item">
        <h3>总部管理</h3>
        <ul>
          <li>版本管理</li>
          <li>版本管理</li>
          <li>版本管理</li>
        </ul>
      </div>
      <div class="item">
        <h3>总部管理</h3>
        <ul>
          <li>版本管理</li>
          <li>版本管理</li>
          <li>版本管理</li>
        </ul>
      </div>
    </div>
    <div class="main">
      <div class="main_top">
        <h3>通知公告</h3>
        <div class="btn" id="add_btn" onclick="add()">新增公告</div>
        <div class="btn" id="save_btn" style="display:none" onclick="save()">保存</div>
      </div>
      <div id="loading" style="text-align: center;height:300px;line-height: 300px">
        <img src="https://gd-hbimg.huaban.com/3099e765b298074ac966b5b9b09b01abab1914cdfaab-OsdLGk_fw658" />
      </div>
      <div id="list_div">

      </div>
      <div id="add_div" style="display:none;">
        <div class="input_div">公告标题：<input id="title"  /></div>
        <div class="input_div">公告详情：
          <div id="content" style="margin-top:10px;border-radius:2px;width:100%;height:300px;
                        border:1px solid #ccc;outline:none;padding:5px;" contenteditable="true"></div></div>
        <div class="input_div">公告类型：
          <select id="type">
            <option value="总部公告">总部公告</option>
            <option value="战区公告">战区公告</option>
          </select>
        </div>

      </div>
    </div>
  </div>
  <div class="bot">
    Copyright © 2022-2023 XINLING. All Rights Reserved.
  </div>
</div>
<script>
  var notices = [];
  loadData();

  function showData(arr){
    list_div.innerHTML = "";
    for(var i=arr.length-1;i>=0;i--){
      var a = arr[i];
      list_div.innerHTML +=
              "<div class='list'>" +
              "<div class='ntitle'>"+a.title+"</div>" +
              "<div class='ntime'>"+a.time+"</div>" +
              "</div>";
    }
  }

  function loadData(){
    list_div.innerHTML = "";
    loading.style.display = "block";
    var req = new XMLHttpRequest();
    req.open("post","/find_all_notice");
    req.setRequestHeader("content-Type","application/json;charset=utf-8");
    var data = {}
    req.send(JSON.stringify(data));
    req.onreadystatechange = function(){
      if(req.readyState==4&&req.status==200){
        notices = JSON.parse(req.responseText);
        showData(notices);
        loading.style.display = "none";
      }
    }
  }

  function save(){
    var req = new XMLHttpRequest();
    req.open("post","/add_notice");
    req.setRequestHeader("content-Type","application/json;charset=utf-8");
    var data = {
      title:title.value,
      content:content.innerHTML,
      type:type.value
    }
    req.send(JSON.stringify(data));
    req.onreadystatechange = function(){
      if(req.readyState==4&&req.status==200){
        if(req.responseText.trim()=="1"){
          alert("新增成功！");
        }

        loadData();
        add_div.style.display = "none";
        list_div.style.display = "block";
        save_btn.style.display = "none";
        add_btn.style.display = "block";
      }
    }
  }

  function add(){
    add_div.style.display = "block";
    list_div.style.display = "none";
    save_btn.style.display = "block";
    add_btn.style.display = "none";
  }
</script>
</body>
</html>
